<template>
	<div>
		<Row>
			<Col class="p-1" :xs="24" :sm="24" :md="12" :lg="8" :xl="6" :xxl="4">
			<Input class="w-100" v-model="searchKey" placeholder="请输入教练姓名" />
			</Col>
		</Row>
		<Row>
			<div class="w-100 d-flex justify-content-end align-items-center ">
				<Button class="m-1" type="primary" shape="circle" @click="searchs" icon="ios-search">查询</Button>
			</div>
		</Row>
		<div v-if="this.tableInfo.data.length == 0" class="d-flex justify-content-center p-1">
			暂无数据
		</div>
		<div v-else>
			<div class="mt-1">
				<Row>
					<Col class="p-1" v-for="(row, index) in tableInfo.data" :xs="24" :sm="24" :md="12" :lg="8" :xl="6"
						:xxl="6">
					<div :style="'background-image:url('+row.cc+'); background-size: 100% 100%;'"
						class="text-xss rounded shadow overflow-hidden">
						<div class="p-2 text-fuguang bg-black-80  d-flex  justify-content-start text-lg text-blod">
							<span>{{row.jlname}}</span>
						</div>
						<div class="p-2 bg-black-50 text-fuguang d-flex justify-content-end">
							<span>{{row.jlid}}</span>
						</div>


						<div
							class="p-2 bg-black-50 position-relative  d-flex justify-content-between align-items-center">
							<div class="w-25  position-relative">
								<div class="padding-top-100"></div>
								<div class="position-absolute rounded-circle overflow-hidden top0">
									<img class="w-100 h-100" :src="row.jcover" />
								</div>
<!-- 								<div class=" text-fuguang text-center text-xss iconfont icon-jianshenfang">{{row.jlid}}
								</div> -->
							</div>
							<div>
								<div class=" text-fuguang text-right text-xss">
									<span class="iconfont icon-dianhua"></span>
									<span>{{row.tel}}</span>
								</div>
								<div class=" text-fuguang text-right text-xss">
									<span class="iconfont icon-nianling1"></span>
									<span>{{formatBirth(row.birth)}}</span>
								</div>
							</div>

						</div>
						<div class="p-1 bg-black-50 d-flex justify-content-end">
							<Button class="text-xss ml-2" type="primary" size="small"
								@click="show(row.jlid)">详细</Button>
						</div>
					</div>
					</Col>
				</Row>
			</div>
			<div>
				<Page class="text-right mt-3" :page-size="tableInfo.pageSize" @on-change="pageSearch"
					:total="tableInfo.total" />
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				searchKey: "",
				tableInfo: {
					currentPage: 1,
					pageSize: 10,
					total: 0,
					data: []
				}
			}
		},
		methods: {
			init: function() {
				this.tableInfo.currentPage = 0;
				this.search();
			},
			newUser: function() {
				this.$router.push({
					path: "/jl/new"
				})
			},
			show: function(jlid) {
				this.$router.push({
					path: "/jl/detail?id=" + jlid
				})
			},
			remove: function(jlid) {
				this.message.confirm({
					title: "删除提示",
					content: "即将删除，确定吗？",
					onOk: () => {
						this.http.delete({
							url: "/jl/info",
							param: {
								jlid
							}
						}).then(data => {
							this.search();
						});
					},
					onCancel: () => {
						this.message.info('操作已取消');
					}
				});
			},
			searchs: function() {
				this.tableInfo.currentPage = 1;
				this.search();
			},
			search: function() {
				this.http.get({
					url: "/jl/page",
					param: {
						// 传一个当前页
						current: this.tableInfo.currentPage,
						size: this.tableInfo.pageSize,
						searchKey: this.searchKey
					}
				}).then(res => {
					this.tableInfo.data = res.records;
					this.tableInfo.currentPage = res.current;
					this.tableInfo.total = res.total;
					this.tableInfo.pageSize = res.size;
					console.log(res.records)
				});
			},
			pageSearch: function(changedPage) {
				this.tableInfo.currentPage = changedPage;
				this.search();
			},
			formatBirth(birth) {
				if (!birth) {
					return "无效日期";
				}
				const date = new Date(birth);
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, "0");
				const day = String(date.getDate()).padStart(2, "0");
				return `${year}-${month}-${day}`;
			}
		},
		created: function() {
			this.init();
		}
	}
</script>

<style>

</style>